<template>
  <div class="group-page">
    <header class="header">
      <!-- S 导航 -->
      <nav class="navbar navbar-default navbar-white navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a href="/ask/">
              <h3 style="text-align: center">问答首页</h3>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class=""><a>首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <form
                  class="form-inline navbar-form search-form pt-1"
                  action="/ask/search.html"
                  method="get"
                >
                  <input
                    class="form-control"
                    name="q"
                    value=""
                    type="text"
                    id="searchinput"
                    placeholder="搜索问题、话题或文章"
                    autocomplete="off"
                  />
                </form>
              </li>
              <li class="hidden-xs">
                <div class="py-3 px-2">
                  <a href="/addons/ask/question/post.html" class="btn btn-primary"
                    >提问</a
                  >
                </div>
              </li>
              <li class="dropdown belling">
                <a
                  href="/u/20278/notification?act=marktopall"
                  class="dropdown-toggle unread"
                  ><i class="fa fa-bell-o fa-lg"></i
                ></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/u/20278/question?type=unsolved"
                      >你有 <b>10</b> 个提问待采纳</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- E 导航 -->
    </header>
    <div class="container">
      <div class="row mt-4" id="questionlist">
        <div class="col-md-8 col-sm-12">
          <div class="category-list mb-2">
            <a href="?" class="btn btn-primary btn-labeled">
              <span class="btn-label"><i class="fa fa-home"></i></span>全部
            </a>
            <a class="btn btn-primary btn-labeled" href="?grade=1" role="button" id="gz"
              >高中</a
            >
            <a class="btn btn-light btn-labeled" href="?grade=2" role="button" id="cz"
              >初中</a
            >
            <a class="btn btn-light btn-labeled" href="?grade=3" role="button" id="xx"
              >小学</a
            >
          </div>

          <!-- S 首页问题列表 -->
          <ul class="nav nav-tabs nav-noborder mb-10 mt-20">
            <li class="active"><a href="?category=&amp;type=new">最新</a></li>
            <li class=""><a href="?category=&amp;type=hot">热门</a></li>
            <li class=""><a href="?category=&amp;type=price">悬赏</a></li>
            <li class=""><a href="?category=&amp;type=unsolved">未解决</a></li>
            <li class=""><a href="?category=&amp;type=unanswer">未回答</a></li>
            <li class=""><a href="?category=&amp;type=solved">已解决</a></li>
            <a href="/addons/ask/question/post.html" class="btn btn-light pull-right"
              ><i class="fa fa-pencil"></i> 发布问题</a
            >
          </ul>
          <div class="tab-inner" style="background: #fff; padding: 15px" v-if="uu">
            <div
              class="question-list"
              data-page="1"
              data-more="1"
              v-for="item in list.value"
              :key="item.id"
            >
              <section class="question-list-item">
                <div class="qa-rank">
                  <div class="answers">
                    0 <small>{{ item.adopt==0?"未解答":"已解答"}}</small>
                  </div>
                </div>
                <div class="summary">
                  {{ item.title }}
                  <h2 class="title">
                    <a @click="handleClickcontent">
                      <span
                        class="price-tag"
                        data-toggle="tooltip"
                        data-title="如果回答被采纳，回答者将获得10元"
                        ><i class="fa fa-rmb"></i> 10</span
                      >
                      <span
                        style="
                          font-weight: normal;
                          text-decoration: none;
                          color: #inherit;
                        "
                        >{{ item.content }}</span
                      >
                    </a>
                  </h2>
                  <div class="tags">
                    <!--<a class="tag">小学</a>-->
                    <a class="tag">{{ item.class_type }}</a>
                    <a class="tag">{{ item.subject }}</a>
                  </div>
                  <!---->
                </div>
              </section>
            </div>
            <div class="text-center pager">
              <ul class="pager">
                <li class="disabled"><span>«</span></li>
                <li><a href="/ask/questions.html?grade=1&amp;page=2">»</a></li>
              </ul>
            </div>
          </div>
          <!-- E 首页问题列表 -->
        </div>
        <div class="col-md-4 col-sm-12 hidden-xs">
          <div class="article-sidebar">
            <!-- S 热门文章 -->
            <div class="panel panel-default recommend-article">
              <div class="panel-heading">
                <h3 class="panel-title">热门文章</h3>
              </div>
              <div class="panel-body"></div>
            </div>
            <!-- E 热门文章 -->

            <!-- S 热门问题 -->
            <div class="panel panel-default hot-article">
              <div class="panel-heading">
                <h3 class="panel-title">热门问题</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">1</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/3.html"
                      title="已传输：3.6 KB 用时 0.37 秒 (9.78 KB/s)."
                      >已传输：3.6 KB 用时 0.37 秒 (9.78 KB/s).</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">2</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/1.html"
                      title="牛吃草作文牛吃草作文牛吃草作文牛吃草作文"
                      >牛吃草作文牛吃草作文牛吃草作文牛吃草作文</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">3</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/2.html"
                      title="公园路口了，感觉有点不舒服了啊哈哈"
                      >公园路口了，感觉有点不舒服了啊哈哈</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">4</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/4.html"
                      title="一只鸭子多少钱，一个样。请吃饭怎么处理？"
                      >一只鸭子多少钱，一个样。请吃饭怎么处理？</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">5</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/6.html"
                      title="测试账号加上测试账号加上"
                      >测试账号加上测试账号加上</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">6</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/5.html"
                      title="cfdasfsdafdsafsdafsd"
                      >cfdasfsdafdsafsdafsd</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 热门问题 -->

            <!-- S 热门标签 -->
            <div class="panel panel-default hot-tags">
              <div class="panel-heading">
                <h3 class="panel-title">热门标签</h3>
              </div>
              <div class="panel-body">
                <a href="/ask/tag/1.html" class="tag"> 11111</a>
                <a href="/ask/tag/2.html" class="tag"> 555</a>
                <a href="/ask/tag/3.html" class="tag"> yt</a>
                <a href="/ask/tag/4.html" class="tag"> uy</a>
              </div>
            </div>
            <!-- E 热门标签 -->

            <!-- S 等待解答 -->
            <div class="panel panel-default recommend-article">
              <div class="panel-heading">
                <h3 class="panel-title">等待解答</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <span class="tag">问</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/5.html"
                      title="cfdasfsdafdsafsdafsd"
                      >cfdasfsdafdsafsdafsd</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 等待解答 -->

            <!-- S 推荐专家 -->
            <div class="panel panel-default panel-users">
              <div class="panel-heading">
                <h3 class="panel-title">推荐专家</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <a class="link-dark" href="/u/19809" title="15074703968"
                      ><img
                        class="media-object img-circle img-small"
                        alt="15074703968"
                        src=""
                    /></a>
                  </div>
                  <div class="media-body">
                    <div class="media-heading">
                      <a class="link-dark" href="/u/19809" title="15074703968"
                        >15074703968</a
                      >
                    </div>
                    <div class="text-muted">0个答案 0次被采纳</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- E 推荐专家 -->
          </div>
        </div>
      </div>
    </div>

    <footer class="footer hidden-xs">
      <div class="container-fluid" id="footer">
        <p class="address">
          Copyright&nbsp;©&nbsp;2017-2020 All Rights Reserved 优优班--学霸训练营
          Copyrights
          <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备20053482号-2</a>
        </p>
      </div>
    </footer>

    <div class="main_nav_bottom hidden-md hidden-sm hidden-lg">
      <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container" align="center">
          <ul class="nav nav-tabs nav-tabs-justified">
            <div class="row" align="center">
              <div class="col-md-3 col-sm-2 col-xs-2" style="padding: 0" align="center">
                <li>
                  <a href="https://www.uuban.com"
                    ><img src="../assets/images/i_home.png" />首页</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="https://www.uuban.com/index.php/index/index/chques.html"
                    ><img src="../assets/images/i_zujuan.png" />组卷</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-3" align="center">
                <li>
                  <a href="https://www.uuban.com/index.php/index/index/zujuan.html"
                    ><img src="../assets/images/i_cart.png" />试题篮</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="https://www.uuban.com/paperfile.html"
                    ><img src="../assets/images/i_paperfile.png" />试卷</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="/u/20278"><img src="../assets/images/i_my.png" />我的</a>
                </li>
              </div>
            </div>
          </ul>
        </div>
      </nav>
    </div>

    <div class="floatbar" style="margin-top: -220px">
      <div class="floatbar-item floatbtn-item-top" style="display: none">
        <a href="javascript:" class="floatbar-btn backtotop">
          <i class="fa fa-chevron-up"></i>
          <p>
            回到<br />
            顶部
          </p>
        </a>
      </div>
    </div>

    <div
      class="autocomplete-suggestions autocomplete-search"
      style="z-index: 1031; top: 30px; left: 0px; width: 100px"
    ></div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, reactive } from "vue";
import { Primary, Juniorhigh, High } from "../../api/index";
const router = useRouter();
const list = reactive([]);
const uu = ref("false");
const route = useRoute();
const nino = route.query.id;
const handleClickcontent = () => {
  router.push("/content");
};
onMounted(() => {
  console.log(route.query.id);
  if (nino == 1) {
    uu.value = false;
    $cookies.set("PHPSESSID", "f40c94219fd9fa6867020f081ef8039f");
    $cookies.set("think_var", "zh-cn");
    Primary().then((res) => {
      console.log(res.data.data);
      list = res.data.data.data;
      console.log(list);
    });
  } else if (nino == 2) {
    uu.value = true;
    $cookies.set("PHPSESSID", "f40c94219fd9fa6867020f081ef8039f");
    $cookies.set("think_var", "zh-cn");
    Juniorhigh().then((res) => {
      console.log(res.data.data);
      list.value = res.data.data;
      console.log(list.value);
    });
  } else if (nino == 3) {
    uu.value = true;
    $cookies.set("PHPSESSID", "f40c94219fd9fa6867020f081ef8039f");
    $cookies.set("think_var", "zh-cn");
    High().then((res) => {
      console.log(res);
      list.value = res.data.data;
    });
  }
});
</script>
<style scoped>
.category-list .tag {
  border-radius: 3px;
}

.btn-label {
  position: relative;
  left: -12px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px 0 0 3px;
}

.btn-labeled {
  padding-top: 0;
  padding-bottom: 0;
}

.category-list .btn {
  margin-bottom: 10px;
  margin-right: 10px;
}

.btn-light .btn-label {
  background: #0076ff;
  color: #fff;
}
</style>
